{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}栏目管理{% endblock %}
{% block content %}
    <div>
        <p class="text-right">
            <button id="add_column" onclick="add_column()" class="btn btn-primary">添加栏目</button>
        </p>
        <table class="table table-hover">
            <tr>
                <td>序号</td>
                <td>栏目名称</td>
                <td>操作</td>
            </tr>
            {% for column in columns %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ column.column }}</td>
                    <td>
                        <a name="edit" href="javascript:" onclick="edit_column(this, {{ column.id }})"><span
                                class="glyphicon glyphicon-pencil"></span></a>
                        <a name="delete" href="javascript:" onclick="del_column(this, {{ column.id }})"><span
                                class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
                    </td>
                </tr>
            {% empty %}
                <p>栏目正在准备中。</p>
            {% endfor %}
        </table>
    </div>
    </div>
    <script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
        function add_column() {
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["400px", "200px"],
                title: "新增栏目",
                content: '<div class="text-center" style="margin-top:20px"><p>请输入新的栏目名称</p><p>{{column_form.column}}</p></div>',
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    column_name = $('#id_column').val();
                    $.ajax({
                        url: '{% url "article:article_column" %}',
                        type: 'POST',
                        data: {"column": column_name},
                        success: function (e) {
                            if (e == "1") {
                                parent.location.reload();
                                layer.msg("good");
                            } else {
                                layer.msg("此栏目已有，请更换名称")
                            }
                        },
                    });
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        }

        function edit_column(the, column_id) {
            var name = $(the).parents("tr").children("td").eq(1).text();
            var index = layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "编辑栏目",
            content: '<div class="text-center" style="margin-top:20px"><p>请编辑的栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p></div>',
            btn:['确定', '取消'],
            yes: function(index, layero){
                   new_name = $("#new_name").val();
                   $.ajax({
                    url: "{% url 'article:rename_article_column' %}",
                    type: "POST",
                    data: {"column_id": column_id, "column_name": new_name},
                    success: function(e){
                        if(e=="1"){
                            parent.location.reload();
                            layer.msg("good");
                        }else{
                            layer.msg("新的名称没有保存,修改失败。")
                            }
                        },
                    });
                },
            });
        }

        function del_column(the, column_id){
        var name = $(the).parents("tr").children("td").eq(1).text();
        layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "删除栏目",
            content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除 ' + name + ' 栏目</p></div>',
            btn:['确定', '取消'],
            yes: function(){
                $.ajax({
                    url: '{% url "article:del_article_column" %}',
                    type:"POST",
                    data: {"column_id":column_id},
                    success: function(e){
                        if(e=="1"){
                            parent.location.reload();
                            layer.msg("has been deleted.");
                        }else{
                            layer.msg("删除失败");
                            }
                        },
                    })
                },
            });
        }


    </script>

{% endblock %}
